import '../../Page/CommonMenu.scss'


import { useState } from 'react'
import { useEventEmitter, useMount, useUpdateEffect } from 'ahooks'

import { refreshStore } from '../../Config/zustand'
import { DevextremeTemplate } from '../../Utils/Devextreme'
import { PageTopOptions, PagePagination } from '../../Utils/PageAssembly'
import { getMenuConfig, emitFunction, menuRefresh, getInitData } from '../../Utils/TableConfig'



const ColumnOptions = ({ data, fields }) => [
    { title: '查看', smallTitle: '附件详情', modalType: 'model', page: 'AnnexDetails', data: data }
]

const pageConfig = { url: 'getAttachmentDetail', page: 'AnnexA01' }

const AnnexList = ({ init, Off }) => {
    const DevEvent = useEventEmitter()
    const { refresh } = refreshStore()
    const [total, setTotal] = useState(0)
    const [Pagina, setPagina] = useState({ AnnexUuid: init.uuid, pageIndex: 1, pageSize: 10 })
    const [Config, setConfig] = useState()
    const [dataSource, setDataSource] = useState()
    const [sortData, setSortData] = useState({})
    const [searchData, setSearchData] = useState({})

    const refreshData = async (paging) => getInitData({ url: pageConfig.url, paging, setTotal, setDataSource })
    useUpdateEffect(() => { menuRefresh({ Pagina, setTotal, setDataSource, setPagina, refreshData }) }, [refresh])
    DevEvent.useSubscription(val => emitFunction({ val, Pagina, sortData, searchData, setSortData, setSearchData, setPagina, refreshData }))

    useMount(() => {
        getMenuConfig({ config: pageConfig.page, setPagina, setConfig })
        getInitData({ url: pageConfig.url, paging: Pagina, setTotal, setDataSource })
    })

    return (
        <div className='CommonMenu AnnexList'>
            <div className='Right'>
                {Config && dataSource &&
                    <div className='Table'>
                        <DevextremeTemplate
                            dataSource={dataSource}
                            config={Config}
                            DevEvent={DevEvent}
                            ColumnOptions={ColumnOptions}
                        />
                        <PagePagination total={total} Paging={Pagina} DevEvent={DevEvent} />
                    </div>
                }
            </div>
        </div>
    )
}

export default AnnexList;